<template>
  <el-dialog title="新增工作区" :visible.sync="visible" @close="close">
    <el-input v-model="workspaceName" placeholder="请输入工作区名称"></el-input>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="create" :disabled="workspaceName.trim().length<=0">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: Boolean  // 父组件传递的控制弹窗显示的属性
  },
  data() {
    return {
      workspaceName: ''
    };
  },
  methods: {
    close() {
      this.$emit('close');  // 向父组件发送关闭事件
    },
    create() {
      this.$emit('create', this.workspaceName);  // 向父组件发送创建事件
      this.workspaceName = '';  // 清空输入框
    }
  }
};
</script>

<style scoped>
/* 样式 */
</style>
